<!DOCTYPE html>
<html>
<!--<![endif]-->
<head>
    <!-- Basic Page Needs
      ================================================== -->
    <meta charset="utf-8">
    <title>Shopholic</title>
    <!-- SEO Meta
      ================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
      ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
      ================================================== -->
    <link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
    <link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="se-pre-con"></div>
<div class="main">

    <!-- PRODUCT-POPUP START -->
    <div id="product_popup" class="quick-view-popup white-popup-block mfp-hide popup-position ">
        <div class="popup-detail">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-5 col-md-5 mb-xs-30">
                                <div class="fotorama" data-nav="thumbs" data-allowfullscreen="native">
                                    <a href="#"><img src="images/1.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/2.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/3.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/4.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/5.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/6.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/4.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/5.jpg" alt="Shopholic"></a>
                                    <a href="#"><img src="images/6.jpg" alt="Shopholic"></a>
                                </div>
                            </div>
                            <div class="col-lg-7 col-md-7">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="product-detail-main">
                                            <div class="product-item-details">
                                                <h1 class="product-item-name">Cross Colours Camo Print Tank half
                                                    mengo</h1>
                                                <div class="rating-summary-block">
                                                    <div title="53%" class="rating-result"><span
                                                            style="width:53%"></span></div>
                                                </div>
                                                <div class="price-box"><span class="price">$80.00</span>
                                                    <del class="price old-price">$120.00</del>
                                                </div>
                                                <div class="product-info-stock-sku">
                                                    <div>
                                                        <label>Availability: </label>
                                                        <span class="info-deta">In stock</span>
                                                    </div>
                                                    <div>
                                                        <label>SKU: </label>
                                                        <span class="info-deta">20MVC-18</span>
                                                    </div>
                                                </div>
                                                <hr class="mb-20">
                                                <p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus.
                                                    Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci
                                                    luctus.</p>
                                                <ul class="product-list">
                                                    <li><i class="fa fa-check"></i> Satisfaction 100% Guaranteed</li>
                                                    <li><i class="fa fa-check"></i> Free shipping on orders over $99
                                                    </li>
                                                    <li><i class="fa fa-check"></i> 14 day easy Return</li>
                                                </ul>
                                                <hr class="mb-20">
                                                <div class="mb-20">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="row">
                                                                <div class="col-lg-3 col-md-12">
                                                                    <span>Select Size :</span>
                                                                </div>
                                                                <div class="col-lg-9 col-md-12">
                                                                    <div class="select-size">
                                                                        <ul class="listing">
                                                                            <li>
                                                                                <span>S</span>
                                                                            </li>
                                                                            <li class="active">
                                                                                <span>M</span>
                                                                            </li>
                                                                            <li>
                                                                                <span>L</span>
                                                                            </li>
                                                                            <li>
                                                                                <span>XL</span>
                                                                            </li>
                                                                            <li>
                                                                                <span>XXl</span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row">
                                                                <div class="col-lg-3 col-md-12">
                                                                    <span>Select Color :</span>
                                                                </div>
                                                                <div class="col-lg-9 col-md-12">
                                                                    <div id="select-colors" class="select-color">
                                                                        <ul class="listing">
                                                                            <li>
                                                                                <div class="color-tooltip">
                                                                                    <span class="color-arrow"></span>Orange
                                                                                </div>
                                                                                <span class="color-option orange"></span>
                                                                            </li>
                                                                            <li>
                                                                                <div class="color-tooltip">
                                                                                    <span class="color-arrow"></span>Black
                                                                                </div>
                                                                                <span class="color-option black"></span>
                                                                            </li>
                                                                            <li>
                                                                                <div class="color-tooltip">
                                                                                    <span class="color-arrow"></span>Green
                                                                                </div>
                                                                                <span class="color-option green"></span>
                                                                            </li>
                                                                            <li>
                                                                                <div class="color-tooltip">
                                                                                    <span class="color-arrow"></span>Pink
                                                                                </div>
                                                                                <span class="color-option pink"></span>
                                                                            </li>
                                                                            <li>
                                                                                <div class="color-tooltip">
                                                                                    <span class="color-arrow"></span>Blue
                                                                                </div>
                                                                                <span class="color-option blue"></span>
                                                                            </li>
                                                                            <li>
                                                                                <div class="color-tooltip">
                                                                                    <span class="color-arrow"></span>Red
                                                                                </div>
                                                                                <span class="color-option red"></span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row">
                                                                <div class="col-lg-3 col-md-12">
                                                                    <span>Qty:</span>
                                                                </div>
                                                                <div class="col-lg-9 col-md-12">
                                                                    <div class="custom-qty">
                                                                        <button onclick="var result = document.getElementById('qty1'); var qty1 = result.value; if( !isNaN( qty1 ) &amp;&amp; qty1 &gt; 1 ) result.value--;return false;"
                                                                                class="reduced items" type="button"><i
                                                                                class="fa fa-minus"></i></button>
                                                                        <input type="text" class="input-text qty"
                                                                               title="Qty" value="1" maxlength="8"
                                                                               id="qty1" name="qty">
                                                                        <button onclick="var result = document.getElementById('qty1'); var qty1 = result.value; if( !isNaN( qty1 )) result.value++;return false;"
                                                                                class="increase items" type="button"><i
                                                                                class="fa fa-plus"></i></button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="mb-20">
                                                <div class="mb-20">
                                                    <div class="bottom-detail cart-button responsive-btn">
                                                        <ul>
                                                            <li class="pro-cart-icon">
                                                                <a href="cart.html" title="Add to Cart"
                                                                   class="btn btn-color"><span></span> Add to Cart</a>
                                                            </li>
                                                            <li class="pro-wishlist-icon"><a href="wishlist.html"
                                                                                             title="Wishlist"><span></span>
                                                                Wishlist</a></li>
                                                            <li class="pro-compare-icon"><a href="compare.html"
                                                                                            title="Compare"><span></span>
                                                                Compare</a></li>
                                                            <li class="pro-email-icon"><a href="#"
                                                                                          title="Email to Friends"><span></span>
                                                                Email to Friends</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="share-link">
                                                    <label>Share This : </label>
                                                    <div class="social-link">
                                                        <ul class="social-icon">
                                                            <li><a class="facebook" title="Facebook" href="#"><i
                                                                    class="fa fa-facebook"> </i></a></li>
                                                            <li><a class="twitter" title="Twitter" href="#"><i
                                                                    class="fa fa-twitter"> </i></a></li>
                                                            <li><a class="linkedin" title="Linkedin" href="#"><i
                                                                    class="fa fa-linkedin"> </i></a></li>
                                                            <li><a class="rss" title="RSS" href="#"><i
                                                                    class="fa fa-rss"> </i></a></li>
                                                            <li><a class="pinterest" title="Pinterest" href="#"><i
                                                                    class="fa fa-pinterest"> </i></a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- PRODUCT-POPUP END -->

    <!-- HEADER START -->
    <script src="js/head.js"></script>
    <!-- HEADER END -->

    <!-- Bread Crumb STRAT -->
    <div class="banner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs">
                <h1 class="banner-title">Shop</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li><a href="index.html"> <i class="fa fa-home"></i>Home</a>/</li>
                        <li><span>Shop</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="ptb-60">
        <div class="container">
            <div class="product-listing-view">
                <div class="row mlr_-20">
                    <div class="col-xl-3 col-lg-3 plr-20 mb-sm-30 static-sidebar"><!-- id="sidebar" -->
                        <div class="sidebar__inner">
                            <div class="sidebar-block gray-bg">
                                <div class="sidebar-box listing-box mb-20"><span class="opener plus"></span>
                                    <div class="sidebar-title">
                                        <h3><i class="fa fa-bars"></i> Categories</h3>
                                    </div>
                                    <div class="sidebar-contant">
                                        <ul>
                                            <li><a>Baby’s Clothes <span>(15)</span></a></li>
                                            <li><a>Boys <span>(25)</span></a></li>
                                            <li><a>Girls <span>(10)</span></a></li>
                                            <li><a>Men <span>(35)</span></a></li>
                                            <li><a>Women <span>(40)</span></a></li>
                                            <li><a>Accessories <span>(25)</span></a></li>
                                            <li><a>Shoes <span>(05)</span></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="sidebar-box mb-20"><span class="opener plus"></span>
                                    <div class="sidebar-title">
                                        <h3><i class="fa fa-filter"></i> Filters</h3>
                                    </div>
                                    <div class="sidebar-contant">
                                        <div class="inner-title">Types</div>
                                        <div class="types mb-20">
                                            <ul>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="clothing" name="clothing">
                              <label for="clothing">Top <span>(05)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="shoes" name="shoes">
                              <label for="shoes">T-shirt <span>(02)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="jewellery" name="jewellery">
                              <label for="jewellery">Shirt <span>(07)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="furniture" name="furniture">
                              <label for="furniture">Jeans <span>(03)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="price-range mb-20">
                                            <div class="inner-title">价格区间</div>
                                            <input class="price-txt" type="text" id="amount">
                                            <div id="slider-range"></div>
                                        </div>
                                        <div class="mb-20">
                                            <div class="inner-title">Brand</div>
                                            <ul>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="apple" name="apple">
                              <label for="apple">Puma <span>(02)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="prada" name="prada">
                              <label for="prada">Roadster <span>(13)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="canon" name="canon">
                              <label for="canon">Here&Now <span>(08)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="htc" name="htc">
                              <label for="htc">DressBerry <span>(04)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="check-box">
                            <span>
                              <input type="checkbox" class="checkbox" id="palm" name="palm">
                              <label for="palm">John Players <span>(09)</span></label>
                            </span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="select-color-main mb-10">
                                            <div class="inner-title">Color</div>
                                            <div class="select-color">
                                                <ul class="listing">
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Orange
                                                        </div>
                                                        <span class="color-option orange"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Yellow
                                                        </div>
                                                        <span class="color-option yellow"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Black
                                                        </div>
                                                        <span class="color-option black"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Green
                                                        </div>
                                                        <span class="color-option green"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Gray
                                                        </div>
                                                        <span class="color-option gray"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Sky
                                                        </div>
                                                        <span class="color-option sky"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Cream
                                                        </div>
                                                        <span class="color-option cream"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Pink
                                                        </div>
                                                        <span class="color-option pink"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Blue
                                                        </div>
                                                        <span class="color-option blue"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Red
                                                        </div>
                                                        <span class="color-option red"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>White
                                                        </div>
                                                        <span class="color-option white"></span>
                                                    </li>
                                                    <li>
                                                        <div class="color-tooltip">
                                                            <span class="color-arrow"></span>Dark Pink
                                                        </div>
                                                        <span class="color-option dark-pink"></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-group mb-20">
                                            <div class="inner-title">Discount</div>
                                            <ul class="discount">
                                                <li>
                                                    <div class="radio">
                                                        <input id="disc80" class="radio-button" type="radio"
                                                               value="disc80" name="radio-disc">
                                                        <label for="disc80">80% and above</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="radio">
                                                        <input id="disc70" class="radio-button" type="radio"
                                                               value="disc70" name="radio-disc">
                                                        <label for="disc70">70% and above</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="radio">
                                                        <input id="disc60" class="radio-button" type="radio"
                                                               value="disc60" name="radio-disc">
                                                        <label for="disc60">60% and above</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="radio">
                                                        <input id="disc50" class="radio-button" type="radio"
                                                               value="disc50" name="radio-disc">
                                                        <label for="disc50">50% and above</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="radio">
                                                        <input id="disc40" class="radio-button" type="radio"
                                                               value="disc40" name="radio-disc">
                                                        <label for="disc40">40% and above</label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="select-size-main mb-10">
                                            <div class="inner-title">Select Size :</div>
                                            <div class="select-size">
                                                <ul class="listing">
                                                    <li>
                                                        <span>S</span>
                                                    </li>
                                                    <li class="active">
                                                        <span>M</span>
                                                    </li>
                                                    <li>
                                                        <span>L</span>
                                                    </li>
                                                    <li>
                                                        <span>XL</span>
                                                    </li>
                                                    <li>
                                                        <span>XXl</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <a href="#" class="btn btn-color">Refine</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-9 col-lg-9 plr-20"><!-- id="content" -->
                        <div class="shorting mb-20">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="view">
                                        <div class="list-types grid active ">
                                            <a>
                                                <div class="grid-icon list-types-icon"></div>
                                            </a>
                                        </div>
                                        <div class="list-types list">
                                            <a>
                                                <div class="list-icon list-types-icon"></div>
                                            </a>
                                        </div>
                                    </div>
                                    <!--排序方式暂不处理-->
                                    <!--<div class="short-by float-right-sm"><span>排序方式:</span>
                                        <div class="select-item select-dropdown">
                                            <fieldset>
                                                <select name="speed" id="sort-price" class="option-drop">
                                                    <option value="" selected="selected">Name (A to Z)</option>
                                                    <option value="">Name(Z - A)</option>
                                                    <option value="">price(low&gt;high)</option>
                                                    <option value="">price(high &gt; low)</option>
                                                    <option value="">rating(highest)</option>
                                                    <option value="">rating(lowest)</option>
                                                </select>
                                            </fieldset>
                                        </div>
                                    </div>-->
                                </div>
                                <div class="col-xl-6">
                                    <div class="show-item float-left-sm"><span>展示数量:</span>
                                        <select name="speed" id="pageSize">
                                            <option value="24" selected="selected">24</option>
                                            <option value="12">12</option>
                                            <option value="8">8</option>
                                        </select>
                                        <span>Per Page</span>
                                        <div class="compare float-right-sm"><a href="#" class="btn btn-color">Compare
                                            (0)</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="product-listing grid-type">
                            <div class="inner-listing">
                                <div class="row mlr_-20" id="proList">
                                    <!--循环部分加此处-->
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="pagination-bar">
                                            <ul>
                                                <li><a href="javascript:void(0)" id="first" class="pages">首页
                                                    <!--<i class="fa fa-angle-left"></i>--></a></li>
                                                <!--<li class="active"><a href="#">1</a></li>-->
                                                <li><a href="javascript:void(0)" id="prev" class="pages">上页</a></li>
                                                <li><a href="javascript:void(0)" id="next" class="pages">下页</a></li>
                                                <li><a href="javascript:void(0)" id="last" class="pages">尾页</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!-- FOOTER START -->
    <div class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-3 col-sm-12 center-sm mb-sm-20">
                        <div class="f-logo">
                            <a href="index.html" class="">
                                <img src="images/footer-logo.png" alt="Shopholic">
                            </a>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-sm-12 center-sm mb-sm-20 align-center">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat massa quis lorem
                            hendrerit ultrices.</p>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-sm-12 center-sm">
                        <div class="footer_social right-side float-none-md">
                            <ul class="social-icon">
                                <li><a title="Facebook" class="facebook"><i class="fa fa-facebook"></i></a></li>
                                <li><a title="Twitter" class="twitter"><i class="fa fa-twitter"></i></a></li>
                                <li><a title="Linkedin" class="linkedin"><i class="fa fa-linkedin"> </i></a></li>
                                <li><a title="RSS" class="rss"><i class="fa fa-rss"> </i></a></li>
                                <li><a title="Pinterest" class="pinterest"><i class="fa fa-pinterest"> </i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="footer-inner">
                <div class="footer-middle">
                    <div class="row">
                        <div class="col-lg-3 f-col">
                            <div class="footer-static-block"><span class="opener plus"></span>
                                <h3 class="title">Information<span></span></h3>
                                <ul class="footer-block-contant address-footer">
                                    <li class="item"><i class="fa fa-home"></i>
                                        <p>150-A Appolo apart, opp. Hopewell Junction, Allen st Road, new
                                            york-405001.</p>
                                    </li>
                                    <li class="item"><i class="fa fa-phone"> </i>
                                        <p>(+00) 9988774455</p>
                                    </li>
                                    <li class="item"><i class="fa fa-envelope"> </i>
                                        <p><a href="#">info@shopholic.com </a></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-3 f-col">
                            <div class="footer-static-block"><span class="opener plus"></span>
                                <h3 class="title">Electronics<span></span></h3>
                                <ul class="footer-block-contant link">
                                    <li><a href="#"><i class="fa fa-stop"></i>Camera</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Cell Phones</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Laptops</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Notebook</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Tablets</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-3 f-col">
                            <div class="footer-static-block"><span class="opener plus"></span>
                                <h3 class="title">Home & Furniture <span></span></h3>
                                <ul class="footer-block-contant link">
                                    <li><a href="#"><i class="fa fa-stop"></i>Accessories</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Bedding & Bath</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Furniture</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Kitchen & Dining</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Living room</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-3 f-col">
                            <div class="footer-static-block"><span class="opener plus"></span>
                                <h3 class="title">Clothes & Fashion<span></span></h3>
                                <ul class="footer-block-contant link">
                                    <li><a href="#"><i class="fa fa-stop"></i>Baby Clothes</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Boys & Girls</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Men Fashion</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Women Fashion</a></li>
                                    <li><a href="#"><i class="fa fa-stop"></i>Shoes & Sandle</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copy-right-bg">
            <div class="container">
                <div class="row  align-center">
                    <div class="col-12">
                        <div class="site-link">
                            <ul>
                                <li><a href="#">About Us</a>|</li>
                                <li><a href="#">Contact Us</a>|</li>
                                <li><a href="#">Customer </a>|</li>
                                <li><a href="#">Service</a>|</li>
                                <li><a href="#">Privacy</a>|</li>
                                <li><a href="#">Policy </a>|</li>
                                <li><a href="#">Accessibility</a>|</li>
                                <li><a href="#">Directory </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="copy-right ">? 2019 All Rights <a href="http://www.bootstrapmb.com/"
                                                                      title="bootstrapmb">Reserved</a>. Design By
                            Aaryaweb
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.sticky-sidebar.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/common.js"></script>

<script>/*页面加载时展示商品并进行分页*/
$(function () {
    var currPage;
    var totalPages;
    paging(currPage);

    function paging(curr) {
        $.ajax({
            url: "/getAllgoodsServlet",
            type: "post",
            dataType: "json",
            data: {
                "pageSize": $("#pageSize").val() || 24,
                "currPage": curr || 1,
                "sortsId": $("#sortsId").val(),
                "keyWords": $("#keyWords").val()
            },
            success: function (result) {
                currPage = result.currPage;
                totalPages = result.totalPages;
                $("#proList").empty();
                $.each(result.goodsList, function (index, item) {
                    var $pro = "<div class=\"col-md-3 col-6 plr-20 item-width mb-20\">\n" +
                        "      <div class=\"product-item\">\n" +
                        "          <div class=\"product-item-inner\">\n" +
                        "              <div class=\"product-image\">\n" +
                        "                  <div class=\"main-label sale-label\"><span>Sale</span></div>\n" +
                        "                  <a target = \"_blank\" href=\"/product-page.html?goodsId=" + item.goodsId + "\">\n" +
                        "                      <img src=\"/goodsimage/" + item.image + "\" alt=\"Shopholic\">\n" +
                        "                  </a>\n" +
                        "                  <div class=\"quick-view\">\n" +
                        "                      <a id='proPopup'  target = \"_blank\" class=\"popup-with-product btn btn-color\"\n" +
                        "                         href=\"/product-page.html?goodsId=" + item.goodsId + "\" title=\"quick-view\"><i\n" +
                        "                              class=\"fa fa-eye\"></i>快速查看</a>\n" +
                        "                  </div>\n" +
                        "              </div>\n" +
                        "              <div class=\"product-item-details mb-2\">\n" +
                        "                  <div class=\"product-item-name\">\n" +
                        "                      <a target = \"_blank\" href=\"/product-page.html?goodsId=" + item.goodsId + "\">" + item.goodsName + "</a>\n" +
                        "                  </div>\n" +
                        "                  <div class=\"price-box\">\n" +
                        "                      <span class=\"price\">$" + item.price + "</span>\n" +
                        "                      <del class=\"price old-price\">$" + (item.price) * 1.2 + "</del>\n" +
                        "                  </div>\n" +
                        "                  <div class=\"rating-summary-block\">\n" +
                        "                      <div class=\"rating-result\" title=\"53%\">\n" +
                        "                          <span style=\"width:53%\"></span>\n" +
                        "                      </div>\n" +
                        "                  </div>\n" +
                        "                  <div class=\"product-des\">\n" +
                        "                      <p>" + item.goodsContent + "</p>\n" +
                        "                  </div>\n" +
                        "                  <div class=\"product-detail-inner\">\n" +
                        "                      <div class=\"detail-inner-left align-center\">\n" +
                        "                          <ul>\n" +
                        "                              <li class=\"pro-cart-icon\">\n" +
                        "                                  <a href=\"cart.html\" title=\"Add to Cart\">\n" +
                        "                                      <span></span>\n" +
                        "                                  </a>\n" +
                        "                              </li>\n" +
                        "                              <li class=\"pro-wishlist-icon\">\n" +
                        "                                  <a href=\"wishlist.html\" title=\"Wishlist\">\n" +
                        "                                      <span></span>\n" +
                        "                                  </a>\n" +
                        "                              </li>\n" +
                        "                              <li class=\"pro-compare-icon\">\n" +
                        "                                  <a href=\"compare.html\" title=\"Compare\">\n" +
                        "                                      <span></span>\n" +
                        "                                  </a>\n" +
                        "                              </li>\n" +
                        "                          </ul>\n" +
                        "                      </div>\n" +
                        "                  </div>\n" +
                        "              </div>\n" +
                        "          </div>\n" +
                        "      </div>\n" +
                        "  </div>\n"
                    $("#proList").append($pro);                  //把循环的部分加在proList类后边
                })
            }
        });
    }

    /*商品分页操作*/
    $("#pageSize").on("change", function () {
        paging(currPage);
    });
    /*首页、上一页、下一页、尾页*/
    $("#first").click(function () {
        paging(1);
    });
    $("#prev").click(function () {
        paging(currPage <= 1 ? 1 : currPage - 1);
    });
    $("#last").click(function () {
        paging(totalPages);
    });
    $("#next").click(function () {
        paging(currPage >= totalPages ? totalPages : currPage + 1);
    });
    /*分类操作*/
    $("#set").on("DOMNodeInserted", ".ui-selectmenu-text", function () {
        //每次点击分类时清空搜索框内值
        $("#keyWords").val(""),
            paging(currPage);
    })
    //根据关键字进行查询
    $("#search_button").click(function () {
        paging(currPage);
    })


})


</script>

</body>
</html>